<template>
  <div class="login-box">
    <div class="login-box-blur"></div>
    <div class="login-container">
      <div class="login-caption">
        {{ appName }}
      </div>

      <el-form ref="loginFormRef" v-loading="isBusy" :model="loginParam" :rules="loginRules">
        <div class="login-content">
          <el-form-item prop="loginId">
            <el-input
              clearable
              prefix-icon="UserFilled"
              placeholder="请输入用户账户"
              v-model="loginParam.loginId"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              show-password
              clearable
              type="password"
              prefix-icon="Lock"
              placeholder="请输入用户密码"
              v-model="loginParam.password"
            />
          </el-form-item>
        </div>

        <div class="login-footer">
          <el-form-item>
            <el-button type="primary" @click="login" class="login-btn">登 录</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { type ComponentInternalInstance } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import {
  defaultLoginParam,
  type LoginParam,
  loginParamRule,
} from '@/common/model/app_server/inputs/login_param'
import type { PageModel } from '@/common/model/app/page_model'
import type { AuthorityInfo } from '@/common/model/app_server/outputs/authority_info'
import { loginInfoStore } from '@/common/storage/pinia/login_info'

defineOptions({
  name: 'LoginView',
})

//region # 属性

// 应用实例
const { proxy }: ComponentInternalInstance = getCurrentInstance() as ComponentInternalInstance
console.log('1', proxy!.$appConfig.apiUrl.app)
// 应用名称
const appName = ref('')

// 是否繁忙
const isBusy = ref(false)

// 表单
const loginFormRef = ref<FormInstance>()

// 登录参数
const loginParam = reactive<LoginParam>(defaultLoginParam)

// 登录参数 验证规则
const loginRules = reactive<FormRules<LoginParam>>(loginParamRule)

//endregion

//region # 方法

// Action
/**
 * 登录
 * */
async function login() {
  if (!loginFormRef.value) return
  await loginFormRef.value.validate((valid, fields) => {
    if (valid) {
      // 登录验证
      // TODO 未指定类型
      const loginInfo = proxy.$api.authentication.login(
        loginParam.loginId,
        loginParam.password,
      )
      loginInfo
        .then((value) => {
          // 成功
          if(value.loginId!= undefined) {
            proxy.$storage.pinia.loginInfo.loginId = value.loginId
            proxy.$storage.pinia.loginInfo.name = value.realName
            console.log('value.loginId', value.loginId);
            isBusy.value = true
            setTimeout(() => {
              isBusy.value = false
              proxy.$router.push('/home')
            }, 500)
          }
        })
        .catch((error) => {
          // 失败
          console.log(error);
        });

    } else {
      // TODO 验证未通过
    }
  })
}

// Private

//endregion

//region # 事件
onMounted(async () => {
  appName.value = proxy!.$appConfig.appName
})
//endregion
</script>

<style lang="less">
@import 'LoginView.less';
</style>
